CSS性能优化

2020.10.23 星期 ：

基础

CSS performance optimizatio

CSS performance optimization

1. will-change 属性
   CSS will-change 属性告诉浏览器元素的哪些属性需要修改，使浏览器能够在元素实际更改之前设置优化，通过在实际更改前执行耗时的工作以提升性能。

will-change: opacity, transform;

2. font-display 属性
   根据 @font-face 规则，font-display 属性定义了浏览器如何加载和显示字体文件，允许文本在字体加载或加载失败时显示回退字体。可以通过依靠折中无样式文本闪现使文本可见替代白屏来提高性能。

3. contain 属性
   CSS的 contain属性允许作者指示元素及其内容尽可能独立于文档树的其余部分。 这允许浏览器针对DOM的有限区域而不是整个页面重新计算布局，样式，绘画，大小或它们的任意组合。